import React, { Component } from 'react';
import styles from './style.less';
import logo from '../../assets/logo.png';

import LoginForm from './components/Login';
import { connect } from 'umi';

const { UserName, Password, Submit } = LoginForm;

export default
@connect()
class extends Component {
  onSubmit = values => {
    console.log('用户输入：', values);
    this.props.dispatch({ type: 'login/login', payload: values });
  };

  render() {
    return (
      <div className={styles.normal} style={{ fontFamily: 'global' }}>
        <div style={{ height: '20%' }}> </div>
        <div className={styles.main} style={{ height: 'auto' }}>
          {/* logo */}
          <img className={styles.logo} src={logo} />
          <div>深高速AI监控平台</div>
          <br />
          {/* 登录表单 */}
          <LoginForm onSubmit={this.onSubmit}>
            <UserName
              name="username"
              placeholder="用户名"
              rules={[{ required: true, message: '请输入用户名' }]}
            />
            <Password
              name="password"
              placeholder="密码"
              rules={[{ required: true, message: '请输入密码' }]}
            />
            <Submit>登录</Submit>
          </LoginForm>
        </div>
      </div>
    );
  }
}
